<!--
  工作流跳转组件，包括意见填写

  用法：
    <qm-workflow-jump
      v-model="visible"
      :url="selectUserUrl"
      :params="models"
      :needChoose="needChoose"
      @select-done="doSend"
      @cancel="visible = false"
    ></qm-workflow-jump>

  说明：
    v-model：绑定一个boolean值，控制弹窗的显示和隐藏
    url：选人的接口地址，取后台工作流控制器的getWorkflowViewModel 接口返回的urls.selectUser数据
    params：选人接口的参数，一般取this.models.model
    needChoose：是否需要选人，默认false，只填写意见
    @select-done：选完人之后触发该事件，传一Object参数：
      {
        choices: choices,                   // 选择的人
        selectComment: this.selectComment,  // 选择的意见，没太大意义
        sendComment: this.sendComment,      // 处理意见
      }
    doSend方法参考：
      doSend({ choices, selectComment, sendComment }) {
        if (this.controlData.workflow.needChoose) {
          if (choices.length == 0) {
            this.$message.warning("请选择处理人！");
            return;
          }
          if (choices.length > 1) {
            this.$message.warning("只能选择一个处理环节！");
            return;
          }
        }
        if (!sendComment) {
          this.$message.warning("请填写处理意见！");
          return;
        }
      }

    @cancel：点取消按钮触发该事件，取消之后要做什么

-->
<template>
  <vxe-modal
    class="qm-workflow-jump"
    ref="selectJumpModal"
    v-model="visible"
    :resize="true"
    :loading="loading"
    width="800px"
    height="380px"
    title="跳转指定环节"
    destroy-on-close
    @close="close"
  >
    <el-form class="qm-workflow-jump-form">
      <el-row :gutter="12">
        <el-col :span="24">
          <div>
            <el-select v-model="selectTask" placeholder="请选择需要跳转的环节">
              <el-option
                v-for="(item,index) in jumpOptions"
                :key="item.taskCode"
                :label="`${jumpOptions.length - index}、${item.taskName}（处理人：${item.assigneeName}；处理时间：${item.finishTime}；处理意见：${item.opinionText}）`"
                :value="item.taskCode"
              ></el-option>
            </el-select>
          </div>
          <div>
            <el-input
              type="textarea"
              :rows="11"
              placeholder="请填写您的意见"
              maxlength="200"
              :show-word-limit="true"
              v-model="sendComment"
            ></el-input>
          </div>
        </el-col>
      </el-row>
      <el-row style="text-align: right; margin-top: 16px">
        <el-button type="primary" @click="selectDone">确 定</el-button>
        <el-button @click="close">取消</el-button>
      </el-row>
    </el-form>
  </vxe-modal>
</template>

<script>
import _ from "lodash";
import request from "@/utils/request";

export default {
  name: "qm-workflow-jump",
  props: {
    value: Boolean,
    needChoose: Boolean,
    url: String,
    params: Object,
    pageAction: String,
  },
  data() {
    return {
      visible: false,
      loading: false,
      treeData: [],
      jumpOptions: [],
      selectTask: "",
      sendComment: "",
    };
  },
  watch: {
    value(visible) {
      if (visible && this.url) {
        this.fetchData();
      } else {
        this.visible = visible;
      }
    },
  },
  methods: {
    close() {
      this.$emit("cancel");
      this.$emit("input", false);
    },
    selectDone() {
      if (!this.selectTask) {
        this.$alert("请选择需要跳转的环节");
      } else if (!this.sendComment) {
        this.$alert("请填写流程意见");
      } else {
        this.$emit("select-done", {
          selectTask: this.selectTask,
          sendComment: this.sendComment,
        });
      }
    },
    fetchData() {
      this.visible = true;
      this.loading = true;

      request({
        url: this.url,
        method: "post",
        data: {},
      })
        .then((r) => {
          this.loading = false;
          this.jumpOptions = r || [];
        })
        .catch((rlt) => {
          this.loading = false;
          this.$alert("获取数据失败，请稍后重试");
        });
    },
  },
};
</script>

<style scoped>
.qm-workflow-jump-form {
  padding: 12px 12px 0 12px;
}
</style>
